<style scoped lang="less">
  @import "./index.less";
</style>

<template>
  <div class="m-doc">
    <mine-header></mine-header>
    <div class="m-content">
      <side-bar></side-bar>
      <div class="m-md">
        <router-view></router-view>
      </div>
      <demo-h5 @getframe="changeFrameRouter"></demo-h5>
    </div>
  </div>
</template>

<script lang="ts">
  import { onBeforeRouteUpdate, useRoute } from "vue-router";
  import { PostMessage } from "@/utils/functions";
</script>

<script lang="ts" setup>
  import MineHeader from "@/components/MineHeader";
  import SideBar from "@/components/SideBar";
  import DemoH5 from "@/components/DemoH5";

  const route = useRoute();
  let postMessage: {
    send: (data: string) => void;
  };

  const navigateTo = (path: string) => {
    postMessage.send(path);
  };

  onBeforeRouteUpdate(({ path }) => {
    navigateTo(path);
  });

  const changeFrameRouter = (frame: HTMLIFrameElement) => {
    postMessage = PostMessage(frame.contentWindow as Window);
    navigateTo(route.path);
  };
</script>
